<template>
  <div class="container">
    <div class="market_title">
      <p class="title_color">{{t('Markets')}}</p>
      <p class="title_small">{{t('Most Active Stocks')}}</p>
    </div>
    <div class="market-container">
      <div class="market-title title_color">{{t('Market')}}</div>
      <div class="market-content">
        <div class="market-content-item">
          <div class="market-content-item-left">
            <svg data-v-30a7f5d9="" aria-hidden="true" class="code svg-icon">
              <use data-v-30a7f5d9="" xlink:href="#icon-bselogo"></use>
            </svg>
            SENSEX
          </div>
          <div class="market-content-item-right">
            <div class="market-content-item-right-title">
              {{ indexMap.BSESN.close }}
            </div>
            <div
              class="market-content-item-right-name"
              :class="
                indexMap.BSESN.isUp
                  ? 'upper'
                  : 'lower'
              "
            >
              {{ indexMap.BSESN.balance }} ({{ indexMap.BSESN.rate }})
            </div>
          </div>
        </div>
        <div class="market-content-item">
          <div class="market-content-item-left">
            <svg data-v-30a7f5d9="" aria-hidden="true" class="code svg-icon">
              <use data-v-30a7f5d9="" xlink:href="#icon-NSE_Logo"></use>
            </svg>
            NIFTY 50
          </div>
          <div class="market-content-item-right">
            <div class="market-content-item-right-title">
              {{ indexMap.NSEI.close }}
            </div>
            <div
              class="market-content-item-right-name"
              :class="
                indexMap.NSEI.isUp
                  ? 'upper'
                  : 'lower'
              "
            >
              {{ indexMap.NSEI.balance }} ({{ indexMap.NSEI.rate }})
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title_label">
      <div
        class="title_label_item"
        :class="[uType == 'XBOM' ? 'active' : '']"
        @click="checkUType('XBOM')"
      >
        BSE
      </div>
      <div class="wire"></div>
      <div
        class="title_label_item"
        :class="[uType == 'XNSE' ? 'active' : '']"
        @click="checkUType('XNSE')"
      >
        NSE
      </div>
    </div>
    <div class="nse">
      <div class="hot-container">
        <div class="hot_label">
          <div class="name">{{t('Name')}}</div>
          <div class="price">{{t('Price')}}</div>
          <div class="change">{{t('Change')}}</div>
        </div>
        <template v-for="e in exchangeType[uType]" :key="e.ticker">
          <div class="hot-item" @click="goDetail(e)">
            <div class="hot-name">{{ e.name }}</div>
            <div class="hot-balance" style="color: rgb(18, 165, 94)">{{ e.close }}</div>
            <div class="hot-balance" style="color: rgb(18, 165, 94)">
            <span class="change_num">{{ e.price_change }}</span><br>
            <span v-if="e.change_rate" class="change_num" :class="
                e.change_rate >= 0
                  ? 'upper'
                  : 'lower'
              ">({{ e.change_rate}}%)</span></div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { get, post } from "@/utils/request";
import { showLoadingToast, closeToast } from "vant";
import store from "@/store/index.js";
import { t } from '@/languages'
const indexMap = computed(() => store.indexMap);
const exchangeType = computed(() => store.exchangeType)
const uType = ref("");

const $router = useRouter();
const stockList = ref([]);

function checkUType(type) {
  if (uType.value == type) return;
  uType.value = type;
  // getStocksList();
}
function handleFunc(path) {
  $router.push({ path });
}

function goDetail(e) {
  $router.push({
    path: "/marketDetails",
    query: {
      name: e.name,
      ticker: e.ticker,
      excode: uType.value
    },
  });
}

// async function getStocksList() {
//   showLoadingToast("loading......");
//   try {
//     const res = await post(`/api/app/stocks/list/`, {
//       exchange_code: uType.value,
//     });
//     stockList.value = res || [];
//   } catch (error) {
//   } finally {
//     closeToast();
//   }
// }

onMounted(() => {
  checkUType("XBOM");
});
</script>

<style lang="scss" scoped>
.container {
  padding: 0.26667rem;
  padding-bottom: 2.33333rem;
}

.container .search-container {
  padding: 0 0.26667rem;
  width: 100%;
  height: 1.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.21333rem;
  background: #c1ecf2;
  border: 0.02667rem solid #507b97;
}

.container .search-container .search-msg {
  color: #aaa;
}

.container .search-container .search-icon .search1 {
  width: 0.88rem;
  height: 0.88rem;
}

.container .market_title {
  margin-top: 0.66667rem;
  margin-left: 0.53333rem;
}

.container .market_title .title_color {
  font-size: 0.69333rem;
  font-weight: 600;
}

.container .market_title .title_small {
  color: #fff;
}

.container .market-container {
  margin-top: 0.26667rem;
}

.container .market-container .market-title {
  color: #325d79;
  font-size: 0.42667rem;
  font-weight: 700;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}

.container .market-container .market-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.26667rem;
}

.container .market-container .market-content .market-content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.21333rem;
  border-radius: 0.21333rem;
  border: 0.02667rem solid #62f8a2;
  box-shadow: 0 0.16rem 0.8rem 0.13333rem rgba(0, 0, 0, 0.12);
  height: 1.73333rem;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-left {
  color: #fff;
  font-size: 0.37333rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-left
  .code {
  width: 0.8rem;
  height: 0.8rem;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-right {
  padding-left: 0.4rem;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-right
  .market-content-item-right-title {
  color: #62f8a2;
  font-size: 0.37333rem;
  padding: 0.13333rem 0;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-right
  .market-content-item-right-name {
  font-size: 0.26667rem;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-right
  .market-content-item-right-up {
  color: #ff7070;
}

.container
  .market-container
  .market-content
  .market-content-item
  .market-content-item-right
  .market-content-item-right-down {
  color: #12a55e;
}

.container .title_label {
  width: 60vw;
  margin: 0.66667rem auto 0.26667rem;
  background: url("@/assets/images/Holding_03.936501e4.png");
  background-size: 100% 100%;
  height: 1.33333rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.container .title_label .wire {
  margin-top: -0.13333rem;
  height: 0.8rem;
  width: 0.02667rem;
  background: #59ad7e;
}

.container .title_label .title_label_item {
  height: 1.06667rem;
  line-height: 0.8rem;
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 0.37333rem;
  font-weight: 700;
}

.container .title_label .active {
  color: #62f8a2;
}

.container .bse,
.container .nse {
  background: #0e1822;
  border: 0.02667rem solid #2b4e5a;
  border-radius: 0.16rem;
  padding: 0.26667rem;
}

.container .hot-container {
  padding-bottom: 0.26667rem;
  display: flex;
  flex-direction: column;
}

.container .hot-container .hot-item {
  border-bottom: 0.02667rem solid #0f3a40;
  padding: 0.21333rem;
  // border-radius: 0.21333rem;
  display: flex;
}

.container .hot-container .hot-item div {
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .hot-container .hot-item .hot-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .hot-container .hot-item .hot-icon .stock {
  width: 1.6rem;
  height: 1.6rem;
}

.container .hot-container .hot-item .hot-icon img {
  width: 100%;
}

.container .hot-container .hot-item .hot-name {
  flex: 2;
  flex-shrink: 0;
  color: #325d79;
  font-size: 0.37333rem;
  color: #fff;
  text-align: left;
  justify-content: flex-start;
}

.container .hot-container .hot-item .hot-balance {
  margin-top: 0.13333rem;
  color: #12a55e;
  font-size: 0.32rem;
  flex: 1;
  flex-shrink: 0;
  flex-wrap: wrap;
  .change_num {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0 0.13333rem;
  }
}

.container .hot-container .hot_label {
  background: #0f3a40;
  margin-bottom: 0.26667rem;
  display: flex;
  color: #fff;
}

.container .hot-container .hot_label .change,
.container .hot-container .hot_label .name,
.container .hot-container .hot_label .price {
  padding: 0.13333rem;
  text-align: center;
}

.container .hot-container .hot_label .price {
  flex: 1;
  flex-shrink: 0;
}

.container .hot-container .hot_label .name {
  flex: 2;
  flex-shrink: 0;
}

.container .hot-container .hot_label .change {
  flex: 1;
  flex-shrink: 0;
}

.container .title {
  padding: 0.26667rem 0;
  width: 100%;
}

.container .title .code {
  width: 1.06667rem;
  height: 1.06667rem;
}
</style>
